<template>
  <a-modal
    class="tk-modal"
    :visible="visible"
    title="调课详情"
    :width="900"
    :bodyStyle="{
      height: '500px',
      overflow: 'auto'
    }"
    @cancel="() => { $emit('cancel') }"
  >
    <detail-list :col="4">
      <detail-list-item :term="$t('key.ssyx')">{{ detail.kkyxm | filterYx(yxList) }}</detail-list-item>
      <detail-list-item :term="$t('key.rkjs')">{{ detail.dsbhxm }}</detail-list-item>
      <detail-list-item :term="$t('key.kcdm')">{{ detail.kcbm }}</detail-list-item>
      <detail-list-item :term="$t('key.kcmc')">{{ detail.kcmc }}</detail-list-item>
    </detail-list>
    <p class="title">原定上课时间：</p>
    <p style="color: rgba(0, 0, 0, 0.85)">
      第{{ detail.yksz }}周至{{ detail.yjsz }}周，{{ detail.yskzmc }} ，第{{ detail.ykskj }}至{{ detail.yjskj }}节，上课地点：{{ detail.yrkjs }} 
    </p>
    <a-divider />
    <p class="title">调课时间：</p>
    <p style="color: rgba(0, 0, 0, 0.85)">
      第{{ detail.tzhksz }}周至{{ detail.tzhjsz }}周，{{ detail.tzhskzmc }} ，第{{ detail.tzhkskj }}至{{ detail.tzhjskj }}节，上课地点：{{ detail.tzhjs }} 
    </p>
    <a-divider />
    <p style="color: rgba(0, 0, 0, 0.85)">{{ $t('key.tkyy') }}：{{ detail.tkyy }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">{{ $t('key.sqr') }}：{{ detail.sqr }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">{{ $t('key.shsj') }}：{{ detail.shsj && detail.shsj.format('YYYY-MM-DD') }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">{{ $t('key.shzt') }}：{{ detail.shzt | filterCode(TYPE0518) }}</p>
    <p style="color: rgba(0, 0, 0, 0.85)">{{ $t('key.shr') }}：{{ detail.shr }}</p>
    
    <a-button slot="footer" type="primary" @click="() => { $emit('cancel') }">{{ $t('button.close') }}</a-button>
  </a-modal>
</template>

<script>

import { STable } from '~'
import DetailList from '~/tool/DetailList'
import { mapState } from 'vuex'
const DetailListItem = DetailList.Item

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    yxList: {
      type: Array,
      default: []
    },
  },
  // props: ['visible'],
  components: {DetailList, DetailListItem, STable},
  data () {
    return {
      form: this.$form.createForm(this),
      detail: {},
    }
  },
  filters: {
    filterCode(value, type) {
      let name = null
      type && type.map(item => {
        if(item.code === value) return name = item.name
      })
      return name
    },
    filterYx(value, yxList) {
      let name = null
      yxList.map(item => {
        if(item.dwh === value) return name = item.dwmc
      })
      return name
    }
  },
  // tkDetail
  computed: {
    ...mapState({
      TYPE0518: state => state.app['TYPE0518'],
    }),
  },
  methods: {
  }
}
</script>

<style lang="less">
.tk-modal{
  .ant-modal-body{
    padding-top: 0;
    padding-bottom: 0;
  }
  .title{
    font-weight: bold;
  }
}
</style>>
